<template>
  <div class="pd-20">
    <el-button type="primary"
               @click="handleAdd()">新 增
    </el-button>

    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:option="{row}">
        <el-button type="primary"
                   @click="handleOption('edit', row)">编辑
        </el-button>
        <el-button type="danger"
                   @click="handleOption('del', row)">删除
        </el-button>
      </template>
    </element-table>

    <el-dialog :title="title"
               :visible.sync="showDialog"
               width="70%">
      <el-form :model="submitData"
               label-position="right"
               ref="formModelRef"
               :rules='formModelRules'
               label-width="150px">
        <el-form-item label="权益名称：" prop="name">
          <el-input v-model="submitData.name"
                    clearable
                    style="width: 380px"
                    placeholder="请输入权益名称"></el-input>
        </el-form-item>
        <el-form-item label="权益类型：" required>
          <el-radio-group v-model="submitData.type">
            <el-radio :label="1">实物</el-radio>
            <el-radio :label="2">抵扣券</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="submitData.type==1">
          <el-form-item label="数量：" prop="num" :rules="submitData.type==1?formModelRules.num:[{required:false}]">
            <el-input v-model="submitData.num"
                      clearable
                      style="width: 380px"
                      placeholder="请输入数量"></el-input>
          </el-form-item>
          <el-form-item label="单位：" prop="unit" :rules="submitData.type==1?formModelRules.unit:[{required:false}]">
            <el-input v-model="submitData.unit"
                      clearable
                      style="width: 380px"
                      placeholder="请输入单位"></el-input>
          </el-form-item>


        </div>
        <div v-if="submitData.type==2">
          <el-form-item label="抵扣券金额：" prop="subtractMoney"
                        :rules="submitData.type==2?formModelRules.subtractMoney:[{required:false}]">
            <el-input v-model="submitData.subtractMoney"
                      clearable
                      style="width: 380px"
                      placeholder="请输入金额"></el-input>
          </el-form-item>
          <el-form-item label="抵扣范围：">
            <el-radio-group v-model="submitData.way" @change="handleChange">
              <el-radio :label="1">全场通用券</el-radio>
              <el-radio :label="2">项目抵扣券</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-if="submitData.way==2">
            <el-checkbox-group v-model="submitData.scope">
              <el-checkbox label='1'>健康风险查</el-checkbox>
              <el-checkbox label='2'>居家监测</el-checkbox>
              <el-checkbox label='3'>私人医生包</el-checkbox>
              <el-checkbox label='4'>家庭医生包</el-checkbox>
              <el-checkbox label='5'>单词咨询</el-checkbox>
              <el-checkbox label='6'>新科技</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>


      </el-form>
      <p align="center">
        <el-button @click="showDialog=false"
                   type="info">取 消
        </el-button>
        <el-button type="primary"
                   @click="submitForm()">保 存
        </el-button>
      </p>

    </el-dialog>


  </div>
</template>

<script>
import ElementTable from '@/base/ElementTable'

export default {
  name: "liangbiaoList",
  data() {
    return {
      tableData: [],
      columns: [
        {
          label: '权益名称',
          prop: 'name',
          align: "center"
        }, {
          label: '类型',
          prop: 'type',
          align: 'center',
          formatter: (row, cellValue) => {
            return this.filterType(row.type)
          }
        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true,
          width: 450
        }
      ],
      loading: false,
      showDialog: false,
      configDialog: false,
      liangbiaoList: [],
      pageTotal: 0,
      dataObj: {},
      list: [],
      pageIndex: 1,
      pageSize: 20,
      defaultData: {
        name: '',
        type: 1,
        scope: [],
        way: 1,
        subtractMoney: '',
        num: '',
        unit: '',
        id: ''
      },
      submitData: {
        name: '',
        type: 1,
        scope: [],
        way: 1,
        subtractMoney: '',
        num: '',
        unit: '',
        id: ''
      },
      title: "新 增",
      formModelRules: {
        name: [
          {required: true, message: '请输入权益名称', trigger: 'blur'},
        ],
        num: [
          {required: true, message: '请输入数量', trigger: 'blur'},
        ],
        unit: [
          {required: true, message: '请输入单位', trigger: 'blur'},
        ],
        subtractMoney: [
          {required: true, message: '请输入抵扣券金额', trigger: 'blur'},
        ],
      },

    }
  },
  created() {

    this.getList()

  },
  components: {
    'element-table': ElementTable
  },
  methods: {
    filterType(type) {
      switch (type) {
        case 1:
          return '实物'
          break
        case 2:
          return '优惠券'
          break
      }
    },
    getList() {
      this.post(this.api.healthMap.getHealthMapAwardList, {
        pageIndex: this.pageIndex - 1,
        pageSize: this.pageSize
      }).then((res) => {
        if (res.data.code === '200') {
          //判断对象是否为空
          this.tableData = res.data.object
          this.pageTotal = res.data.totalNum

        }
      })
    },
    handleAdd() {
      this.showDialog = true
      this.title = '新 增'
      this.submitData = Object.assign(this.submitData, this.defaultData)

    },

    async handleOption(op, row) {
      switch (op) {
        case 'edit':
          this.showDialog = true
          this.title = '编 辑'
          this.submitData = Object.assign(this.submitData, this.defaultData)
          this.getHealthMapAwardDetail(row.id, row.type)
          break
        case 'del':
          this.$confirm('是否要确认?', '提示', {
            type: 'warning'
          }).then(() => {
            this.getHealthMapAwardDel(row.id, row.type)
          })
          break
      }
    },

    //删除权益
    getHealthMapAwardDel(id, type) {
      this.post(this.api.healthMap.getHealthMapAwardDel, {
        id: id,
        type: type
      }).then((res) => {
        if (res.data.code === '200') {
          this.getList()
          this.$message.success('删除成功')
        }
      })
    },


    submitForm() {
      this.$refs.formModelRef.validate(async (valid) => {
        if (valid) {
          var mydata = {}
          if (this.submitData.scope.length > 0) {
            let submitData = this.submitData;
            var bean = JSON.stringify(submitData);
            bean = JSON.parse(bean)
            bean.scope = bean.scope.toString()
            mydata = bean
          } else {
            mydata = this.submitData
            mydata.scope=''
          }

          this.updateHealthMapAward(mydata)
        }

      })

    },
    //切换场景
    handleChange() {
      if (this.submitData.way == 1) {
        this.submitData.scope = []
      }
    },
    //更新权益
    updateHealthMapAward(myData) {

      this.post(this.api.healthMap.updateHealthMapAward, myData).then((res) => {
        if (res.data.code === '200') {
          this.showDialog = false
          this.getList()
          this.$message.success('更新成功')
        }
      })
    },
    //获取权益详情
    getHealthMapAwardDetail(id, type) {
      this.post(this.api.healthMap.getHealthMapAwardDetail, {
        id: id,
        type: type
      }).then((res) => {
        if (res.data.code === '200') {
          var bean = res.data.object;
          this.submitData.name = bean.name
          this.submitData.id = bean.id
          if (bean.subtractMoney) {
            this.submitData.subtractMoney = bean.subtractMoney
          }
          if (bean.num) {
            this.submitData.num = bean.num
          }
          if (bean.unit) {
            this.submitData.unit = bean.unit
          }
          if (bean.type) {
            this.submitData.type = bean.type
          }
          if (bean.scope) {
            this.submitData.way = 2
            this.submitData.scope = bean.scope.split(',')

          } else {
            this.submitData.way = 1
            this.submitData.scope = []
          }


          console.log(this.submitData)
        }
      })
    },
    // 分页
    handleChangePage(page) {
      this.pageIndex = page;
      this.getList();
    },
    // 时间转换
    formatterDate(row) {
      return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm')
    }
  },
}
</script>

<style scoped>

</style>
